<template>
  <div class='box'>
    <el-form class="appFormItem" ref="refForm" :model="form" label-width="auto">
      <!-- 基本信息 -->
      <el-row class="m-b">
        <el-col :span="24">
          <div class="all">
            <div class="left">
              <el-icon :size="20">
                <User />
              </el-icon>
              <span class="text">基本信息</span>
            </div>
            <div class="right">
              <el-icon :size="20" class="CMpointer" v-if="!EditBasic">
                <Edit ref="editRef" @click="changeEditBasic" />
              </el-icon>
              <p v-else>
                <el-button type="warning" @click="saveBasic">保存</el-button>
                <el-button type="info" @click="cancelA">取消</el-button>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="!EditBasic">
        <el-col :span="8">
          <el-form-item label="姓名：" prop="name">
            {{ form.name }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别：" prop="gender">
            {{ form.genderText }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出生日期：" prop="birthday">
            {{ form.birthday }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="年龄：" prop="age">
            {{ form.age }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号：" prop="phone">
            {{ form.phone }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身高：" prop="height">
            {{ form.height }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="体重（kg）:" prop="weight">
            {{ form.weight }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="BMI：" prop="bmi">
            {{ form.bmi }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="腹围（cm）：" prop="chestCircumference">
            {{ form.chestCircumference }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="腰围（cm）：" prop="waistline">
            {{ form.waistline }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="劳动强度：" prop="laborIntensity">
            {{ form.laborIntensityText }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归属组织结构：" prop="orgName">
            {{ form.orgName }}
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="标签：" prop="tags">
            {{ form.tags }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="归属健康顾问：" prop="healDoctorName">
            {{ form.healDoctorName }}
          </el-form-item>
        </el-col>

      </el-row>
      <!-- 编辑-基本信息 -->
      <EditBasicTpl ref="basicComponentRef" v-if="EditBasic" :userInfo="form" />
      <!-- 详细信息 -->
      <el-row class="m-b">
        <el-col :span="24">
          <div class="all">
            <div class="left">
              <el-icon :size="20">
                <User />
              </el-icon>
              <span class="text">详细信息</span>
            </div>
            <div class="right">
              <el-icon :size="20" class="CMpointer" v-if="!EditDetailed">
                <Edit @click="changeEditDetailed" />
              </el-icon>
              <p v-else>
                <el-button type="warning" @click="saveDetailed">保存</el-button>
                <el-button type="info" @click="cancelB">取消</el-button>
              </p>

            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="!EditDetailed">
        <el-col :span="8">
          <el-form-item label="身份证账号：" prop="idNumber">
            {{ form.idNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="民族：" prop="ethnicity">
            {{ form.ethnicity }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="血型：" prop="bloodType">
            {{ form.bloodTypeText }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="学历：" prop="education">
            {{ form.educationText }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业：" prop="occupation">
            {{ form.occupationText }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚姻状况：" prop="maritalStatus">
            {{ form.maritalStatusText }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="电子邮件:" prop="email">
            {{ form.email }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人：" prop="emergencyContact">
            {{ form.emergencyContact }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="紧急联系人电话：" prop="emergencyContactPhone">
            {{ form.emergencyContactPhone }}
          </el-form-item>
        </el-col>
        <!-- 4 没有字段 -->
        <!-- <el-col :span="8">
          <el-form-item label="工作单位：" prop="deptId">
            {{ form.name }}
          </el-form-item>
        </el-col> -->
        <el-col :span="16">
          <el-form-item label="所在地区：">
            {{ form.provinceName }}-{{ form.cityName }}-{{ form.districtName }}
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注信息：" prop="notes">
            {{ form.notes }}
          </el-form-item>
        </el-col>
      </el-row>
      <EditDetailedTpl ref="detailedComponentRef" v-if="EditDetailed" :userInfo="form" />

    </el-form>
  </div>
</template>
 
<script setup lang='ts'>
import { ref, defineProps, toRefs, reactive } from "vue";
import { userDetailRequest } from '@/api/user';
import { FormInstance } from 'element-plus';
import EditBasicTpl from "@/views/user/details/healthFiles/BasicInformation/EditBasic.vue";
import EditDetailedTpl from "@/views/user/details/healthFiles/BasicInformation/EditDetailed.vue";
const props = defineProps({
  userInfo: {
    type: Object
  }
});
// 表单字段
const form = ref();
form.value = {...props.userInfo}
// 保存基本信息
const basicComponentRef = ref()
const saveBasic = async () => {
  await basicComponentRef.value.SubmitForm()
  EditBasic.value = !EditBasic.value
  getUserDetail(form.value.id)
}
// 保存详细信息
const detailedComponentRef = ref()
const saveDetailed = async() => {
  await detailedComponentRef.value.SubmitForm()
  EditDetailed.value = !EditDetailed.value
  getUserDetail(form.value.id)
}
// console.log(userInfo?.value,'详情数据过来了吗-333---');
const refForm = ref<FormInstance>();
const EditBasic = ref(false)//编辑基本信息
const changeEditBasic = () => {
  EditBasic.value = !EditBasic.value
  getUserDetail(form.value.id)
}
const cancelA = () => {
  EditBasic.value = !EditBasic.value
  getUserDetail(form.value.id)
  
}

const EditDetailed = ref(false)//编辑详细信息 
const changeEditDetailed = () => {
  EditDetailed.value = !EditDetailed.value
}
const editRef = ref(null)
const cancelB = () => {
  EditDetailed.value = !EditDetailed.value
  getUserDetail(form.value.id)

}
// 获取详情
const getUserDetail = async (id:any) => {
  // hadValue.value= false
  const data: any = await userDetailRequest({ id: id });
  form.value = data.data;
  
  // Object.assign(userDetails, data.data)
  // hadValue.value= true
};


</script>
 
<style lang="scss" scoped>
.box {
  .all {
    display: flex;
    height: 63px;
    background: #F1F4F9;
    border-radius: 8px;
  }

  .left {
    width: 50%;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    padding-left: 15px;

    .text {
      padding-left: 10px;
    }
  }

  .right {
    flex: 1;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    padding-right: 15px;
  }

  .CMpointer {
    cursor: pointer;
  }
}</style>